<template>
  <common-title text="后台首页">
    <template #center>
      <el-radio-group
        v-model="activeName"
        class="tabs home-tabs"
        @change="handleTab"
      >
        <el-radio-button
          :class="{ active: isActive === index }"
          @click="changeClass(index)"
          class="right-main"
          :label="item.label"
          :name="item.name"
          v-for="(item, index) in tabData"
          :key="index"
        >
          {{ item.label }}</el-radio-button
        >
      </el-radio-group>
    </template>
  </common-title>
  <div
    class="innerPane"
    :class="roleCodes == 'schooladmin' ? 'schoolAdmin' : ''"
  >
    <!-- <city-admin></city-admin> -->
    <!-- 市教育局 -->
    <div class="section citySection" v-if="roleCodes == 'cityadmin'">
      <div class="modules">
        <div class="item">
          <div class="top-info">
            <div class="item-title">学生人数</div>
            <router-link class="link" to="/stuNum">查看详情</router-link>
          </div>
          <div v-if="stuNumData.length" class="pic-text flex">
            <div class="chart" ref="pieChart" id="stuNumPieChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item">
          <div class="top-info">
            <div class="item-title">综素评价</div>
            <router-link class="link" to="/overallEvaluation"
              >查看详情</router-link
            >
          </div>
          <div v-if="overallEvaluationData.length" class="pic-text flex">
            <div
              class="chart"
              ref="pieChart"
              id="overallEvaluationPieChart"
            ></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item">
          <div class="top-info">
            <div class="item-title">学业质量</div>
            <router-link class="link" to="/studyQuality">查看详情</router-link>
          </div>
          <div v-if="studyQualityData.length" class="pic-text flex">
            <div class="chart" ref="pieChart" id="studyQualityPieChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="modules">
        <div class="item">
          <div class="top-info">
            <div class="item-title">生涯规划</div>
          </div>
          <ul
            v-if="careerData && Object.keys(careerData).length"
            class="pic-text"
          >
            <li class="school li-item">
              <div class="text">
                <div class="left">
                  <div>生涯测评</div>
                </div>
                <router-link class="link" to="/careerEvaluation"
                  >查看详情</router-link
                >
              </div>
              <div class="middle">
                <div
                  class="updated"
                  :style="
                    careerData.syghUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.syghUse
                  "
                  :title="'已更新:' + careerData.syghUse + '所'"
                >
                  已更新:{{ careerData.syghUse }}所
                </div>
                <div
                  class="unUpdated"
                  :style="
                    careerData.syghUnUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.syghUnUse
                  "
                  :title="'未更新:' + careerData.syghUnUse + '所'"
                >
                  未更新:{{ careerData.syghUnUse }}所
                </div>
              </div>
            </li>
            <li class="school li-item">
              <div class="text">
                <div class="left">
                  <div>新高考选科</div>
                </div>
                <router-link class="link" to="/subjectSelectionforGaok"
                  >查看详情</router-link
                >
              </div>
              <div class="middle">
                <div
                  class="updated"
                  :style="
                    careerData.xkUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.xkUse
                  "
                  :title="'已更新:' + careerData.xkUse + '所'"
                >
                  已更新:{{ careerData.xkUse }}所
                </div>
                <div
                  class="unUpdated"
                  :style="
                    careerData.xkUnUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.xkUnUse
                  "
                  :title="'未更新:' + careerData.xkUnUse + '所'"
                >
                  未更新:{{ careerData.xkUnUse }}所
                </div>
              </div>
            </li>
          </ul>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="subjectDistribution item">
          <div class="top-info">
            <div class="item-title">选科分布</div>
            <router-link class="link" to="/distributionofXuank"
              >查看详情</router-link
            >
          </div>
          <div v-if="subjectDistributionData.length" class="pic-text flex">
            <!-- <div class="left">
              已更新：{{ subjectDistributionData[0].value }}所，{{
                subjectDistributionData[0].ratio
              }}%
            </div> -->
            <div class="chart" id="subjectDistributionPieChart"></div>
            <!-- <div class="right">
              未更新： {{ subjectDistributionData[1].value }}所，{{
                subjectDistributionData[1].ratio
              }}%
            </div> -->
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item passPercentage">
          <div class="top-info">
            <div class="item-title">学考通过率</div>
            <router-link class="link" to="/passPercentage"
              >查看详情</router-link
            >
          </div>
          <div v-if="passPercentageData.length" class="pic-text">
            <div class="chart" id="passPercentageBarChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 市教育局结束 -->
    <!-- 学校 -->
    <div class="section schoolSection" v-if="roleCodes == 'schooladmin'">
      <div class="modules">
        <div class="item stuNumSchool">
          <div class="top-info">
            <div class="item-title">学生人数</div>
            <router-link class="link" to="/stuNum">更新</router-link>
          </div>

          <div v-if="stuNumData.length" class="pic-text flex">
            <div class="left">
              <i class="if-font-female"></i>
            </div>
            <!-- <div class="chart-outer"> -->
            <div class="chart" ref="pieChart" id="stuNumPieChart"></div>
            <!-- </div> -->
            <div class="right">
              <i class="if-font-male"></i>
            </div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
          <div v-if="stuNumData.length" class="totalNum">
            学生总人数：<span class="mainColor">{{ stuNumTotalData }}</span
            >人
          </div>
        </div>
        <div class="item">
          <div class="top-info">
            <div class="item-title">综素评价</div>
            <router-link class="link" to="/overallEvaluation">更新</router-link>
          </div>
          <div v-if="overallEvaluationData.length" class="pic-text">
            <div
              class="chart"
              ref="pieChart"
              id="overallEvaluationPieChart"
            ></div>
            <div>已使用系统学生数</div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item">
          <div class="top-info">
            <div class="item-title">学业质量</div>
            <router-link class="link" to="/studyQuality">更新</router-link>
          </div>
          <div v-if="studyQualityData.length" class="pic-text">
            <div class="chart" ref="pieChart" id="studyQualityPieChart"></div>
            <div>已使用系统学生数</div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="modules">
        <div class="item">
          <div class="top-info">
            <div class="item-title">生涯规划</div>
          </div>
          <ul
            v-if="careerData && Object.keys(careerData).length"
            class="pic-text"
          >
            <li class="school li-item">
              <div class="text">
                <div class="left">
                  <div>生涯测评</div>
                </div>
                <router-link class="link" to="/careerEvaluation"
                  >更新</router-link
                >
              </div>
              <div class="middle">
                <div
                  class="updated"
                  :style="
                    careerData.syghUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.syghUse
                  "
                  :title="'已测评:' + careerData.syghUse + '人'"
                >
                  已测评:{{ careerData.syghUse }}人
                </div>
                <div
                  class="unUpdated"
                  :style="
                    careerData.syghUnUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.syghUnUse
                  "
                  :title="'未测评:' + careerData.syghUnUse + '人'"
                >
                  未测评:{{ careerData.syghUnUse }}人
                </div>
              </div>
            </li>
            <li class="school li-item">
              <div class="text">
                <div class="left">
                  <div>新高考选科</div>
                </div>
                <router-link class="link" to="/subjectSelectionforGaok"
                  >更新</router-link
                >
              </div>
              <div class="middle">
                <div
                  class="updated"
                  :style="
                    careerData.xkUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.xkUse
                  "
                  :title="'已选科:' + careerData.xkUse + '人'"
                >
                  已选科:{{ careerData.xkUse }}人
                </div>
                <div
                  class="unUpdated"
                  :style="
                    careerData.xkUnUse == ''
                      ? 'flex:1'
                      : 'flex:' + careerData.xkUnUse
                  "
                  :title="'未选科:' + careerData.xkUnUse + '人'"
                >
                  未选科:{{ careerData.xkUnUse }}人
                </div>
              </div>
            </li>
          </ul>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item subjectDistributionSchool">
          <div class="top-info">
            <div class="item-title">选科分布</div>
            <router-link class="link" to="/distributionofXuank"
              >更新</router-link
            >
          </div>
          <div v-if="subjectDistributionData.length" class="pic-text flex">
            <div class="chart" id="subjectDistributionBarChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item passPercentage">
          <div class="top-info">
            <div class="item-title">学考通过率</div>
            <router-link class="link" to="/passPercentage">更新</router-link>
          </div>
          <div v-if="passPercentageData.length" class="pic-text">
            <div class="chart" id="passPercentageBarChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 学校结束 -->
    <!-- 省级开始 -->
    <div
      class="section provinceSection"
      v-if="roleCodes == 'provinceadmin' || roleCodes == 'superadmin'"
    >
      <div class="modules">
        <div class="item">
          <div class="top-info">
            <div class="item-title">学生人数</div>
            <router-link class="link" to="/stuNum">查看详情</router-link>
          </div>
          <div v-if="stuNumData.length" class="pic-text flex">
            <div class="chart" ref="barChartProvince" id="stuNumBarChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item">
          <div class="top-info">
            <div class="item-title">综素评价</div>
            <router-link class="link" to="/overallEvaluation"
              >查看详情</router-link
            >
          </div>
          <div v-if="overallEvaluationData.length" class="pic-text flex">
            <div
              class="chart"
              ref="barChartProvince"
              id="overallEvaluationBarChart"
            ></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item">
          <div class="top-info">
            <div class="item-title">学业质量</div>
            <router-link class="link" to="/studyQuality">查看详情</router-link>
          </div>
          <div v-if="studyQualityData.length" class="pic-text flex">
            <div
              class="chart"
              ref="barChartProvince"
              id="studyQualityBarChart"
            ></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="modules">
        <div class="item">
          <div class="top-info">
            <div class="item-title">生涯规划</div>
            <router-link
              v-if="isActiveCareer == 0"
              class="link"
              to="/careerEvaluation"
              >查看详情</router-link
            >
            <router-link
              v-if="isActiveCareer == 1"
              class="link"
              to="/subjectSelectionforGaok"
              >查看详情</router-link
            >
          </div>
          <el-radio-group
            v-model="activeName"
            class="tabs careerTabs"
            @change="handleCareerTab"
          >
            <el-radio-button
              :class="{ active: isActiveCareer === careerIndex }"
              @click="changeClassCareer(careerIndex)"
              class="right-main"
              :label="item.label"
              :name="item.value"
              v-for="(item, careerIndex) in careerTabData"
              :key="careerIndex"
            >
              {{ item.label }}</el-radio-button
            >
          </el-radio-group>
          <div v-if="careerPlanningData.length" class="pic-text flex">
            <div
              class="chart"
              ref="barChartProvince"
              id="careerPlanningBarChart"
            ></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="subjectDistribution item">
          <div class="top-info">
            <div class="item-title">选科分布</div>
            <router-link class="link" to="/distributionofXuank"
              >查看详情</router-link
            >
          </div>
          <div v-if="subjectDistributionData.length" class="pic-text flex">
            <div class="chart" id="subjectDistributionBarChart"></div>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
        <div class="item passPercentage">
          <div class="top-info">
            <div class="item-title">学考通过率 （各市已更新学校数量）</div>
            <router-link class="link" to="/passPercentage"
              >查看详情</router-link
            >
          </div>
          <div v-if="passPercentageData.length" class="pic-text passTable">
            <el-table
              :data="passPercentageData"
              style="height: 100%"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column
                prop="area"
                label="地市学校数"
                width="99"
                fixed="left"
              />
              <el-table-column
                :prop="'code' + Number(index + 1)"
                :label="item"
                v-for="(item, index) in passPercentageHeader"
                :key="index"
                width="40"
              >
              </el-table-column>
            </el-table>
          </div>
          <div v-else class="noData">
            <img src="../../assets/image/noData.png" alt="" />
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 省级结束 -->
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, getCurrentInstance, nextTick } from "vue";

import CommonTitle from "@/components/CommonTitle.vue";
// import cityAdmin from "@/views/home/cityAdmin.vue";
import { getTabs } from "@/utils/util.js";
import { getHomeData } from "@/utils/requests.js";

let tabs = [];
const tabData = ref(getTabs(tabs).slice(0, 4));
let activeName = ref(tabData.value[0].name);
const careerTabData = [
  { label: "生涯测评", value: 0 },
  { label: "新高考选科", value: 1 },
];
let homeData = [];
//注：不同角色，对应模块的数据都是共用的变量
let stuNumData = ref([]),
  stuNumTotalData = ref(null),
  overallEvaluationData = ref([]),
  studyQualityData = ref([]),
  careerData = ref({}),
  subjectDistributionXAxisData = ref([]), //学校选科分布柱状图用
  subjectDistributionData = ref([]),
  passPercentageData = ref([]),
  passPercentageXAxisData = ref([]),
  // 以下是省教育局额外增加的数据
  stuNumXAxis = ref([]),
  overallEvaluationXAxis = ref([]),
  studyQualityXAxis = ref([]),
  careerPlanningData = ref([]), //生涯规划柱状图用,默认生涯测评，当切换到选科时，选科数据传给它
  careerPlanningXAxis = ref([]),
  careerPlanningEvaluation = ref([]),
  careerPlanningEvaluationXAxis = ref([]),
  careerPlanningXk = ref([]), //新高考选科数据
  careerPlanningXkXAxis = ref([]),
  passPercentageHeader = ref([]);

const { proxy } = getCurrentInstance(); // 获取全局配置项
let pieChart = ref();
let myChart = null; //pie echarts实例(市教育局/学校 饼图)
let barChart = ref();
let myBarChart = null; //bar echarts实例(市教育局/学校 学考通过率)
let schoolBarChart = null; //学校角色bar echarts实例（学校 选科分布）
let barChartProvince = null; //省教育局bar echarts实例

let isActive = ref(0),
  isActiveCareer = ref(0);
let roleCodes = ref(localStorage.getItem("be-roleCodes"));
onMounted(() => {});

const changeClass = (i) => {
  isActive.value = i;
};

//-- 重置无数据状态下的echarts
const initAllEcharts = () => {
  stuNumData.value = [];
  stuNumData.value = [];
  stuNumTotalData.value = null;
  overallEvaluationData.value = [];
  studyQualityData.value = [];
  careerData.value = {};
  subjectDistributionXAxisData.value = []; //学校选科分布柱状图用
  subjectDistributionData.value = [];
  passPercentageData.value = [];
  passPercentageXAxisData.value = [];
  stuNumXAxis.value = [];
  overallEvaluationXAxis.value = [];
  studyQualityXAxis.value = [];
  careerPlanningData.value = []; //生涯规划柱状图用,默认生涯测评，当切换到选科时，选科数据传给它
  careerPlanningXAxis.value = [];
  careerPlanningEvaluation.value = [];
  careerPlanningEvaluationXAxis.value = [];
  careerPlanningXk.value = []; //新高考选科数据
  careerPlanningXkXAxis.value = [];
  passPercentageHeader.value = [];
};

/**
 * 切换选项卡
 */
const handleTab = (name) => {
  activeName.value = name.substr(0, 4);
  getData().then((res) => {
    //# 解决无数据时未重置后台首页数据=>导致echarts不刷新bug
    switch (roleCodes.value) {
      case "cityadmin":
        res.cityadmin == null ? initAllEcharts() : "";
        break;

      case "schooladmin":
        res.schooladmin == null ? initAllEcharts() : "";
        break;

      case "provinceadmin":
        res.provinceadmin == null ? initAllEcharts() : "";
        break;
    }
  });
};

/**
 * 饼图
 * 市教育局：学生人数  综素评价 学业质量  选科分布
 * 学校：学生人数 综素评价 学业质量
 *  */
const initPieCharts = (module) => {
  // console.log(module);

  // 初始化echarts实例
  module = module + "PieChart";
  // console.log(
  //   "2进入绘图",
  //   module,
  //   module == "stuNumPieChart"
  //     ? stuNumData.value
  //     : module == "overallEvaluationPieChart"
  //     ? overallEvaluationData.value
  //     : subjectDistributionData.value
  // );
  if (document.getElementById(module) == null) {
    return;
  }
  echarts.dispose(document.getElementById(module));
  var myChart = echarts.init(document.getElementById(module));
  //pieChart.value   proxy.$echarts.init(pieChart.value);//echarts.init(this.$refs.pieChart);

  // 绘制图表
  let currentPiedata = [];
  switch (module) {
    case "stuNumPieChart":
      currentPiedata = stuNumData.value;
      break;
    case "overallEvaluationPieChart":
      currentPiedata = overallEvaluationData.value;
      break;
    case "studyQualityPieChart":
      currentPiedata = studyQualityData.value;
      break;
    case "subjectDistributionPieChart":
      currentPiedata = subjectDistributionData.value;
      break;
  }
  myChart.setOption({
    grid: {
      left: 0,
      right: 0,
    },
    tooltip: {
      show: true,
      borderColor: "transparent",
      valueFormatter: (value) => {
        if (roleCodes.value == "schooladmin") {
          return value + "人";
        } else {
          return value + "所";
        }
      },
    },
    series: [
      {
        type: "pie",
        radius:
          roleCodes.value == "schooladmin" &&
          (module == "overallEvaluationPieChart" ||
            module == "studyQualityPieChart")
            ? ["55%", "85%"]
            : roleCodes.value == "schooladmin" && module == "stuNumPieChart"
            ? "85%"
            : "50%",
        data: currentPiedata,
        label: {
          //学校管理员综素评价学业质量要显示label（因为只固定显示一项数据，所以false），所有角色饼图都显示label
          show:
            roleCodes.value == "schooladmin" &&
            (module == "overallEvaluationPieChart" ||
              module == "studyQualityPieChart")
              ? false
              : true,
          position:
            roleCodes.value == "schooladmin" &&
            (module == "overallEvaluationPieChart" ||
              module == "studyQualityPieChart")
              ? "center"
              : roleCodes.value == "schooladmin" && module == "stuNumPieChart"
              ? "inside"
              : "outside",
          formatter:
            roleCodes.value == "cityadmin"
              ? "{b}:{c}所,\n{d}%"
              : roleCodes.value == "schooladmin" &&
                (module == "overallEvaluationPieChart" ||
                  module == "studyQualityPieChart")
              ? "{cValue|{c}人}\n{d}%"
              : "{b}:{c}",
          textStyle:
            roleCodes.value == "cityadmin"
              ? { color: "#333", fontSize: 12, lineHeight: 20, align: "center" }
              : roleCodes.value == "schooladmin" && module == "stuNumPieChart"
              ? { color: "#fff", fontSize: 12 }
              : { color: "rgb(0, 137, 255)", lineHeight: 24, fontSize: 12 },
          distanceToLabelLine: roleCodes.value == "cityadmin" ? 0 : 5,
          rich: {
            cValue: {
              fontSize:
                roleCodes.value == "schooladmin" &&
                (module == "overallEvaluationPieChart" ||
                  module == "studyQualityPieChart")
                  ? 18
                  : 12,
              fontWeight:
                roleCodes.value == "schooladmin" &&
                (module == "overallEvaluationPieChart" ||
                  module == "studyQualityPieChart")
                  ? "bold"
                  : "",
            },
          },
        },
        labelLine: {
          show: false,
          length: -5,
        },

        startAngle:
          roleCodes.value == "schooladmin" && module == "stuNumPieChart"
            ? 90
            : 0,
        itemStyle: {
          color: function (params) {
            var colorlist =
              roleCodes.value == "schooladmin" && module == "stuNumPieChart"
                ? ["#1761FA", "#f9649f"]
                : roleCodes.value == "schooladmin" &&
                  (module == "overallEvaluationPieChart" ||
                    module == "studyQualityPieChart")
                ? ["#0089ff", "#0202a4"]
                : ["#1761FA", "#f59311"];
            return colorlist[params.dataIndex];
          },
        },
      },
    ],
  });
};

/**
 * 柱状图
 * 市教育局/学校：学考通过率
 *  */
const initBarCharts = (module) => {
  module = module + "BarChart";
  let yaxisUnit = "",
    tooltipText = "";
  yaxisUnit = roleCodes.value == "cityadmin" ? "单位：所" : "单位：%";
  tooltipText =
    roleCodes.value == "cityadmin"
      ? "{a}<br />{b}：{c}所"
      : "{a}<br />{b}：{c}%";
  var myBarChart = echarts.init(document.getElementById(module));

  myBarChart.setOption(myBarChartOption()); //myBarChartOption &&
};

/**
 * 市教育局/学校 学考通过率配置
 *  */
var myBarChartOption = () => {
  return {
    grid: {
      top: "20%",
      left: "2%",
      right: "0",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      textStyle: {
        align: "left",
        fontSize: 12,
      },
      trigger: "axis",
      borderColor: "transparent",
      valueFormatter: (value) => {
        if (roleCodes.value == "cityadmin") {
          return value + "所";
        } else {
          return value + "%";
        }
      },
    },
    legend: {
      top: "0%",
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        fontSize: 12,
      },
      // data: [
      //       {
      //         name: '已更新',
      //       },
      //       {
      //         name: '未更新',
      //       }
      //     ],
      /* formatter:function(name){
          if(roleCodes.value=="cityadmin"){
            if(name=="updated"){
              return "已更新"
            }
            if(name=="unUpdated"){
              return "未更新"
            }
          }
          else{
            if(name=="passed"){
            return "已通过"
            }
            if(name=="unPassed"){
              return "未通过"
            }
          }
        } */
    },
    yAxis: {
      type: "value",
      name: roleCodes.value == "cityadmin" ? "单位：所" : "单位：%", //yaxisUnit,
      nameGap: 10,
      nameTextStyle: {
        fontSize: "11px",
        align: "left",
      },
      axisLabel: {
        fontSize: "11px",
      },
      splitLine: {
        show: false,
      },
      minInterval: 1,
    },
    xAxis: {
      type: "category",
      data: passPercentageXAxisData.value,
      axisLabel: {
        fontSize: "10px",
        showMinLabel: true,
        rotate: 45,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      margin: 0,
    },
    series: passPercentageData.value,
    barMaxWidth: 30,
  };
};

/* 学校：选科分布柱状图
 */
const initBarChartsSchool = (module) => {
  // console.log(subjectDistributionData.value)
  module = module + "BarChart";
  var schoolBarChart = echarts.init(document.getElementById(module));
  schoolBarChart.setOption({
    grid: {
      top: "5%",
      left: "2%",
      right: "11%",
      bottom: "-5%",
      containLabel: true,
    },
    tooltip: {
      textStyle: {
        align: "left",
        fontSize: 12,
      },
      borderColor: "transparent",
      trigger: "axis",
      valueFormatter: (value) => value + "人",
    },
    xAxis: {
      show: false,
      type: "value",
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: subjectDistributionXAxisData.value,
      axisLine: {
        show: false,
      },
      axisLabel: {
        fontSize: "11px",
      },
      axisTick: {
        show: false,
      },
      margin: 0,
    },
    series: [
      {
        type: "bar",
        data: subjectDistributionData.value,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: "#93eff6" },
            { offset: 0.7, color: "#1f95f0" },
            { offset: 1, color: "#188df0" },
          ]),
        },
      },
    ],
    barMaxWidth: 30,
    label: {
      show: "true",
      position: "right",
      color: "#333",
      fontSize: "11px",
    },
  });
};
/**
 * 省教育局 前面5个模块柱状图配置
 *  */
let barChartProvinceOption = (module) => {
  let yData = [],
    xAxisData = [];
  switch (module) {
    case "stuNumBarChart": {
      yData = stuNumData.value;
      xAxisData = stuNumXAxis.value;
      break;
    }
    case "overallEvaluationBarChart": {
      yData = overallEvaluationData.value;
      xAxisData = overallEvaluationXAxis.value;
      break;
    }
    case "studyQualityBarChart": {
      yData = studyQualityData.value;
      xAxisData = studyQualityXAxis.value;
      break;
    }
    case "careerPlanningBarChart": {
      yData = careerPlanningData.value;
      xAxisData = careerPlanningXAxis.value;
      break;
    }
    case "subjectDistributionBarChart": {
      yData = subjectDistributionData.value;
      xAxisData = subjectDistributionXAxisData.value;
      break;
    }
  }

  return {
    grid: {
      top: "20%",
      left: "0%",
      right: "0",
      bottom: "0%",
      containLabel: true,
    },
    tooltip: {
      textStyle: {
        align: "left",
        fontSize: 12,
      },
      borderColor: "transparent",
      trigger: "axis",
      valueFormatter: (value) => value + "所",
    },
    legend: {
      top: "0%",
      itemHeight: 12,
      itemWidth: 12,
      textStyle: {
        fontSize: 10,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：所", //yaxisUnit,
      // nameGap: 15,
      nameTextStyle: {
        fontSize: "10px",
        align: "left",
      },
      axisLabel: {
        fontSize: "10px",
      },
      splitLine: {
        show: false,
      },
      minInterval: 1,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLabel: {
        fontSize: "10px",
        showMinLabel: true,
        rotate: -30,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      margin: 0,
    },
    series: yData,
    barMaxWidth: 30,
    color: ["#0089ff", "#f59a23"],
  };
};
/**
 * 柱状图：省教育局
 *  */
const initBarChartsProvince = (module) => {
  module = module + "BarChart";
  let yaxisUnit = "",
    tooltipText = "";
  // yaxisUnit = roleCodes.value=="cityadmin"?"单位：所":"单位：%"
  // tooltipText = roleCodes.value=="cityadmin"?"{a}<br />{b} {c}所":"{a}<br />{b} {c}%"
  var barChartProvince = echarts.init(document.getElementById(module));
  barChartProvince.setOption(barChartProvinceOption(module)); //myBarChartOption &&
};

/**
 *  省教育局中 生涯规划选项卡
 *  */
const changeClassCareer = (i) => {
  isActiveCareer.value = i;
};

/*
 切换生涯规划选项卡，切换绘图
 */
const handleCareerTab = (name) => {
  careerPlanningData.value =
    name == "生涯测评"
      ? JSON.parse(JSON.stringify(careerPlanningEvaluation.value))
      : JSON.parse(JSON.stringify(careerPlanningXk.value));
  careerPlanningXAxis.value =
    name == "生涯测评"
      ? JSON.parse(JSON.stringify(careerPlanningEvaluationXAxis.value))
      : JSON.parse(JSON.stringify(careerPlanningXkXAxis.value));
  echarts.dispose(document.getElementById("careerPlanningBarChart"));
  // barChartProvince = echarts.init(document.getElementById("careerPlanningBarChart"));
  // barChartProvince.setOption(barChartProvinceOption("careerPlanningBarChart"))
  // console.log( name=="生涯测评",careerPlanningData.value[0].data,careerPlanningData.value)
  initBarChartsProvince("careerPlanning");
};

/**
 *  接口 省教育局/市教育局/学校的角色获取数据
 *  */
const getData = () => {
  return new Promise((resolve, reject) => {
    getHomeData({
      yearIn:
        activeName.value == 1 ? filterForm.value.yearIn : activeName.value,
    }).then((data) => {
      resolve(data);
      if (data) {
        // stuNumData overallEvaluationData studyQualityData careerData  subjectDistributionData passPercentageData
        // console.log(data, "1111");
        data = data[data.enableKey];
        // console.log(data, "2222");
        // 市教育局数据
        if (
          data &&
          Object.keys(data).length &&
          roleCodes.value == "cityadmin"
        ) {
          let passPercentage = [];
          stuNumData.value =
            data.stuNum && data.stuNum.data ? data.stuNum.data : [];
          overallEvaluationData.value =
            data.zhpj && data.zhpj.data ? data.zhpj.data : [];
          studyQualityData.value =
            data.xyzl && data.xyzl.data ? data.xyzl.data : [];
          careerData.value = data.syghIndexVo ? data.syghIndexVo : {};
          subjectDistributionData.value =
            data.xkfb && data.xkfb.data ? data.xkfb.data : [];
          passPercentageXAxisData.value =
            data.xkPassPerLine && data.xkPassPerLine.xAxisData
              ? data.xkPassPerLine.xAxisData
              : [];
          passPercentage =
            data.xkPassPerLine && data.xkPassPerLine.series
              ? data.xkPassPerLine.series
              : [];
          passPercentage.forEach((v, i) => {
            if (v.name == "已更新") {
              passPercentage[i].itemStyle = { color: "#0089ff" };
            }
            if (v.name == "未更新") {
              passPercentage[i].itemStyle = { color: "#f59a23" };
            }
          });
          passPercentageData.value = passPercentage;
          // console.log(
          //   "1已获取数据",
          //   stuNumData.value,
          //   overallEvaluationData.value,
          //   careerData.value,
          //   subjectDistributionData.value,
          //   JSON.stringify(passPercentageData.value)
          // );
          // })
          if (stuNumData.value.length) {
            nextTick(() => {
              initPieCharts("stuNum");
            });
          }
          if (overallEvaluationData.value.length) {
            nextTick(() => {
              initPieCharts("overallEvaluation");
            });
          }
          if (studyQualityData.value.length) {
            nextTick(() => {
              initPieCharts("studyQuality");
            });
          }
          if (subjectDistributionData.value.length) {
            nextTick(() => {
              initPieCharts("subjectDistribution");
            });
          }
          if (passPercentageData.value.length) {
            myBarChartOption();
            setTimeout(() => {
              initBarCharts("passPercentage");
            }, 0);
          }
        }
        // 学校数据
        if (
          data &&
          Object.keys(data).length &&
          roleCodes.value == "schooladmin"
        ) {
          let passPercentage = [];
          stuNumData.value =
            data.stuNumPie && data.stuNumPie.data ? data.stuNumPie.data : [];
          stuNumTotalData.value =
            parseInt(stuNumData.value[0].value) +
            parseInt(stuNumData.value[1].value);
          overallEvaluationData.value =
            data.zhpj && data.zhpj.data ? data.zhpj.data : [];
          overallEvaluationData.value.forEach((v) => {
            //23.12.4发现改过接口
            if (v.name == "已使用") {
              v.label = { show: true };
            }
          });
          studyQualityData.value = data.xyzl?.data || [];
          studyQualityData.value.forEach((v) => {
            if (v.name == "已使用") {
              v.label = { show: true };
            }
          });
          careerData.value = data.syghIndexVo ? data.syghIndexVo : {};
          if (data.xkfbList && data.xkfbList.length) {
            subjectDistributionXAxisData.value = data.xkfbList.map((item) => {
              return item.name;
            });
            subjectDistributionData.value = data.xkfbList.map((item) => {
              return item.value;
            });
          }
          passPercentageXAxisData.value =
            data.xkPassPerLine && data.xkPassPerLine.xAxisData
              ? data.xkPassPerLine.xAxisData
              : [];
          passPercentage =
            data.xkPassPerLine && data.xkPassPerLine.series
              ? data.xkPassPerLine.series
              : [];
          passPercentage.forEach((v, i) => {
            if (v.name == "通过") {
              passPercentage[i].itemStyle = { color: "#0089ff" };
            }
            if (v.name == "未通过") {
              passPercentage[i].itemStyle = { color: "#f59a23" };
            }
          });
          passPercentageData.value = passPercentage;
          // console.log(
          //   "1已获取数据",
          //   stuNumData.value,
          //   JSON.stringify(overallEvaluationData.value),
          //   studyQualityData.value,
          //   careerData.value,
          //   JSON.stringify(subjectDistributionData.value),JSON.stringify(subjectDistributionXAxisData.value),
          //   passPercentageData.value
          // );
          if (stuNumData.value.length) {
            nextTick(() => {
              initPieCharts("stuNum");
            });
          }
          if (overallEvaluationData.value.length) {
            nextTick(() => {
              initPieCharts("overallEvaluation");
            });
          }
          if (studyQualityData.value.length) {
            nextTick(() => {
              initPieCharts("studyQuality");
            });
          }
          if (subjectDistributionData.value.length) {
            nextTick(() => {
              initBarChartsSchool("subjectDistribution");
            });
          }
          if (passPercentageData.value.length) {
            setTimeout(() => {
              initBarCharts("passPercentage");
            }, 0);
          }
        }
        // 省教育局数据
        if (
          data &&
          Object.keys(data).length &&
          roleCodes.value == "provinceadmin"
        ) {
          stuNumData.value =
            data.stuNum && data.stuNum.series ? data.stuNum.series : [];
          stuNumXAxis.value =
            data.stuNum && data.stuNum.xAxisData ? data.stuNum.xAxisData : [];
          overallEvaluationData.value =
            data.zhpj && data.zhpj.series ? data.zhpj.series : [];
          overallEvaluationXAxis.value =
            data.zhpj && data.zhpj.xAxisData ? data.zhpj.xAxisData : [];
          studyQualityData.value =
            data.xyzl && data.xyzl.series ? data.xyzl.series : [];
          studyQualityXAxis.value =
            data.xyzl && data.xyzl.xAxisData ? data.xyzl.xAxisData : [];

          careerPlanningEvaluation.value =
            data.syghUse && data.syghUse.series ? data.syghUse.series : [];
          careerPlanningData.value = JSON.parse(
            JSON.stringify(careerPlanningEvaluation.value)
          );
          careerPlanningEvaluationXAxis.value =
            data.syghUse && data.syghUse.xAxisData
              ? data.syghUse.xAxisData
              : [];
          careerPlanningXAxis.value = JSON.parse(
            JSON.stringify(careerPlanningEvaluationXAxis.value)
          );
          careerPlanningXk.value =
            data.syghXk && data.syghXk.series ? data.syghXk.series : [];
          careerPlanningXkXAxis.value =
            data.syghXk && data.syghXk.xAxisData ? data.syghXk.xAxisData : [];

          subjectDistributionData.value =
            data.xkfb && data.xkfb.series ? data.xkfb.series : [];
          subjectDistributionXAxisData.value =
            data.xkfb && data.xkfb.xAxisData ? data.xkfb.xAxisData : [];

          let passpassPercentage =
            data.xkPassPerTable && data.xkPassPerTable.rows
              ? data.xkPassPerTable.rows
              : [];
          // console.log(JSON.stringify(passpassPercentage));
          passPercentageData.value = [];
          passpassPercentage.forEach((v, i) => {
            let codeA = "",
              obj = {};
            v.forEach((vsub, isub) => {
              codeA = "code" + isub;
              if (isub == 0) {
                //  passPercentageData.value.push({"area":vsub})
                // passPercentageData.value.area=vsub
                obj.area = vsub;
                // Object.assign(obj,{area:vsub})
              } else {
                obj[codeA] = vsub;
              }
            });
            // passPercentageData.value.push()
            // console.log(obj)
            passPercentageData.value.push(obj);
          });
          //   console.log(JSON.stringify(passPercentageData.value));
          passPercentageHeader.value =
            data.xkPassPerTable && data.xkPassPerTable.heads
              ? data.xkPassPerTable.heads
              : [];
          // console.log(passPercentageHeader.value,JSON.stringify(passPercentageData.value))
          if (stuNumData.value.length) {
            nextTick(() => {
              initBarChartsProvince("stuNum");
            });
          }
          if (overallEvaluationData.value.length) {
            nextTick(() => {
              initBarChartsProvince("overallEvaluation");
            });
          }
          if (studyQualityData.value.length) {
            nextTick(() => {
              initBarChartsProvince("studyQuality");
            });
          }
          if (careerPlanningData.value.length) {
            nextTick(() => {
              initBarChartsProvince("careerPlanning");
            });
          }
          if (subjectDistributionData.value.length) {
            nextTick(() => {
              initBarChartsProvince("subjectDistribution");
            });
          }
        }
      }
    });
  });
};

/* 调用获取接口数据函数 */
getData();

/**
 * 窗口变大变小，重绘图形
 *  */
window.addEventListener("resize", function () {
  if (roleCodes.value == "cityadmin" || roleCodes.value == "schooladmin") {
    myChart = echarts.init(document.getElementById("stuNumPieChart"));
    myChart.resize();
    myChart = echarts.init(
      document.getElementById("overallEvaluationPieChart")
    );
    myChart.resize();
    myChart = echarts.init(document.getElementById("studyQualityPieChart"));
    myChart.resize();

    myBarChart = echarts.init(
      document.getElementById("passPercentageBarChart")
    );
    // myBarChart.setOption(myBarChartOption())
    myBarChart.resize();
  }
  if (roleCodes.value == "cityadmin") {
    myChart = echarts.init(
      document.getElementById("subjectDistributionPieChart")
    );
    myChart.resize();
  }
  if (roleCodes.value == "schooladmin") {
    schoolBarChart = echarts.init(
      document.getElementById("subjectDistributionBarChart")
    );
    schoolBarChart.resize();
  }
  if (roleCodes.value == "provinceadmin") {
    barChartProvince = echarts.init(document.getElementById("stuNumBarChart"));
    barChartProvince.resize();
    barChartProvince = echarts.init(
      document.getElementById("overallEvaluationBarChart")
    );
    barChartProvince.resize();
    barChartProvince = echarts.init(
      document.getElementById("studyQualityBarChart")
    );
    barChartProvince.resize();
    barChartProvince = echarts.init(
      document.getElementById("careerPlanningBarChart")
    );
    barChartProvince.resize();
    barChartProvince = echarts.init(
      document.getElementById("subjectDistributionBarChart")
    );
    barChartProvince.resize();
  }
});
</script>

<style scoped>
.tabs {
  display: flex;
  justify-content: center;
}

.home-tabs .el-radio-button :deep(.el-radio-button__inner) {
  padding-left: 40px;
  padding-right: 40px;
}
.careerTabs {
  margin-top: -40px;
}
.careerTabs :deep(.el-radio-button__inner) {
  font-size: 12px;
  padding: 3px 7px;
}
.careerTabs .active :deep(.el-radio-button__inner) {
  color: #fff;
}

.tabs .el-radio-button.active :deep(.el-radio-button__inner) {
  background-color: var(--themeColor);
}

.right .el-tabs {
  margin-top: -40px;
}
.innerPane {
  padding: 0;
  background-color: var(--themeBg);
}
.section {
  background-color: var(--themeBg);
}
.modules {
  display: flex;
  height: 38vh;
  background-color: #eee;
}
.modules:first-child {
  margin-bottom: 20px;
}
.modules .item {
  flex: 1;
  font-size: 14px;
  text-align: center;
  margin: 0 10px;
  background-color: #fff;
  padding: 12px;
}
.modules .item:first-child {
  margin-left: 0;
}
.modules .item:last-child {
  margin-right: 0;
}
.item.stuNumSchool .pic-text.flex > .left,
.modules .item.stuNumSchool .pic-text.flex > .right {
  flex: 3;
}
.item.stuNumSchool .pic-text.flex > .chart {
  flex: 4;
}
.modules .item .item-title {
  font-weight: bold;
}
.right-main .modules .item a {
  color: var(--themeColor);
}
.top-info,
.pic-text.flex {
  display: flex;
  flex-direction: row;
}
.top-info {
  justify-content: space-between;
  margin-bottom: 20px;
}
.subjectDistribution .top-info,
.subjectDistributionSchool .top-info,
.passPercentage .top-info {
  margin-bottom: 0;
}
.pic-text {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  margin: 16px 0 12px;
}
.pic-text,
.noData {
  height: 78%;
  min-width: 260px;
  min-height: 160px;
}
.subjectDistributionSchool .pic-text {
  height: 95%;
  margin-top: 0;
  margin-bottom: 0;
}
.passPercentage .pic-text {
  height: 88%;
  margin-top: 10px;
  margin-bottom: 0;
}

.pic-text .left,
.pic-text .middle {
  display: flex;
  min-width: 64px;
}
.pic-text.flex > * {
  display: flex;
  justify-content: center;
  flex: 1;
}
.schoolSection .item:first-child .left i,
.schoolSection .item:first-child .right i {
  font-size: 60px;
}
.schoolSection .item:first-child .left {
  justify-content: space-around;
}
.schoolSection .item:first-child .pic-text.flex .left {
  color: #ff3399;
}
.schoolSection .item:first-child .pic-text.flex .right {
  color: #1761fa;
}
.schoolSection .module:first-child .item:first-child .middle {
  flex: 1.5;
}
.schoolSection .totalNum {
  margin-top: -25px;
}
.schoolSection .totalNum .mainColor {
  color: var(--themeColor);
  font-size: 18px;
  font-weight: bold;
}
.pic-text .li-item {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  width: 100%;
  min-width: 230px;
  align-items: center;
  justify-content: space-around;
}
/* .pic-text .li-item > .left,
.pic-text .li-item > .link {
  flex: 1;
} */
.link {
  color: var(--themeColor);
}
.pic-text .li-item .text {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin-bottom: 10px;
}
.pic-text .li-item .text div {
  font-weight: bold;
}
.pic-text .li-item > .middle {
  flex: 1;
  width: 90%;
  font-size: 12px;
  color: #fff;
  margin-right: 2px;
  cursor: pointer;
  overflow: hidden;
}
.noData {
  margin-top: -10px;
  margin-left: 10%;
  width: 80%;
}
.noData img {
  width: 100%;
}
.noData .text {
  color: #999;
}
.updated,
.unUpdated {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 11px;
  padding: 6px 4px;
}
.li-item .updated {
  padding-right: 20px;
  background-color: var(--themeColor);
}
.unUpdated {
  background-color: #f90;
  margin-left: -16px;
}
.chart {
  width: 100%;
  height: 100%;
}
.passPercentage .passTable {
  width: 25vw;
  height: 90%;
  justify-content: left;
  align-items: center;
  overflow: auto;
  margin: 10px auto 0;
}
.passTable .el-table {
  font-size: 12px;
  text-align: center;
  border: 1px solid #eee;
}
.passTable :deep(.el-table:not(.el-table--border) .el-table__cell:first-child) {
  border-right: 1px solid #eee;
}
.el-table :deep(th.el-table__cell) {
  padding: 0;
}
.el-table :deep(th.el-table__cell) .cell {
  color: var(--themeColor);
}
.el-table :deep(.el-scrollbar__bar) {
  display: block !important;
}
/* .el-table :deep(.el-table__body-wrapper::-webkit-scrollbar) {
	width: 0;
}
.el-table :deep(.el-table--scrollable-x .el-table__body-wrapper) {
    overflow: hidden !important;
}
.el-table :deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
.el-table :deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  border-radius: 4px;
  height: 58px;
  background: rgb(168, 171, 172);
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(241, 240, 245, 0.2);
  border-radius: 3px;
  background: #F1F0F5;
} */
</style>
